<template>
 <div class="slider" ref="slider">
	 <div class="slider-group" ref="sliderGroup">
		  <slot>
		  </slot>
	 </div>
	 
	 <div class="dots">
	 	<div class="dots-btn-list">
	  		<span class="dot" :class="{color: currentPageIndex === index }" v-for="(item, index) in dots"></span>
	 	</div>
	 </div>
 </div>
</template>
 
<script>
 import {addClass} from '../../common/js/dom'
 import BScroll from 'better-scroll'
 export default{
 data() {
  return {
  dots:[],
  currentPageIndex: 0
  }
 },
 props:{
  loop:{
  type:Boolean,
  default:true
  },
  autoPlay:{
  type:Boolean,
  default:true
  },
  interval:{
  type: Number,
  default:4000
  }
 },
 mounted() {
  this._setSliderWidth()
  setTimeout(() => {
  // 在初始化slider前初始化dot
  this._initDots()
  this._initSlider()
  if (this.autoPlay) {
   this._play()
  }
  }, 20)
  // 监听窗口大小改变时间
  window.addEventListener('resize', () => {
  if (!this.slider) {
   return
  }
  this._setSliderWidth(true)
  this.slider.refresh()
  })
 },
 methods:{
  _setSliderWidth(isResize) {
  this.children = this.$refs.sliderGroup.children
  console.log(this.children)
  let width = 0
  // slider 可见宽度
  let sliderWidth = this.$refs.slider.clientWidth
  for (let i = 0; i < this.children.length; i++) {
   let child = this.children[i]
   // 设置每个子元素的样式及高度
   addClass(child, 'slider-item')
   child.style.width = sliderWidth + 'px'
   // 计算总宽度
   width += sliderWidth
  }
  // 循环播放首尾各加一个,因此总宽度还要加两倍的宽度
  if (this.loop && !isResize) {
   width += 2 * sliderWidth
  }
  this.$refs.sliderGroup.style.width = width + 'px'
  },
//_initSlider() {
//this.slider = new BScroll(this.$refs.slider, {
// scrollX: true,
// scrollY: false,
// momentum: false,
// snap: true,
// snapLoop: this.loop,
// snapThreshold: 0.3,
// snapSpeed: 400,
// // click:true
//})
  _initSlider() {
  this.slider = new BScroll(this.$refs.slider, {
   scrollX: true,
   scrollY: false,
   momentum: false,
   snap: {
   	loop:true,
   	threshold:0.3,
   	speed:400
   },
      click:true
  })
  // 监听滚动结束时间获取pageX
  this.slider.on('scrollEnd', () => {
   let pageIndex = this.slider.getCurrentPage().pageX
// if (this.loop) {
// // 由于bscroll循环播放首尾各加一个,因此索引-1
// pageIndex -= 1
// }
   this.currentPageIndex = pageIndex
   if (this.autoPlay) {
   	clearTimeout(this.timer)
   this._play()
   }
  })
  this.slider.on('beforeScrollStart', () => {
   if (this.autoPlay) {
   clearTimeout(this.timer)
   }
  })
  },
  _initDots() {
  // 长度为n的空数组
this.dots = new Array(this.children.length)
//	this.dots= new Array(this.children.length - 2)
  },
  _play() {
  // currentPageIndex为不含首尾副本的索引，因此若有循环要+2
  let pageIndex = this.currentPageIndex + 1
  if (this.loop) {
   pageIndex += 1
  }
  this.timer = setTimeout(() => {
   this.slider.goToPage(pageIndex, 0, 400)
  }, this.interval)
  }
 },
 // 生命周期destroyed销毁清除定时器，有利于内存释放
 destroyed() {
  clearTimeout(this.timer)
 },
 }
</script>
<style lang="scss">
 .slider{
 min-height: 1px;
 position: relative;
 height: 4.69333rem;
 }
 
 .slider-group{
 position: relative;
 overflow: hidden;
 white-space: nowrap;
 height: 4.69333rem;
 }
 
 .slider-item{
 float: left;
 box-sizing: border-box;
 overflow: hidden;
 text-align: center;
 height: 4.69333rem;
 overflow: hidden;
 }
 
 .slider-item a{
 display: block;
 width: 100%;
 overflow: hidden;
 text-decoration: none;
 height: 4.69333rem;
 }
 
 
 .slider-item img{
 display: block;
 width: 100%;
 }
 
 .dots{
 position: absolute;
 left: 0;
 bottom: .192rem;
 text-align: center;
 font-size: 0;
 height: .552rem;
 line-height: .552rem;
 width: 100%;
 	.dots-btn-list{
 		background-color: rgba(0,0,0,.5);
	    border-radius: .21333rem;
	    padding: 0 .32rem;
	    display: inline-block;
 	}
 }
 
 .dot{
 float: left;
 margin: .10667rem!important;
 width: .21333rem;
 height: .21333rem;
 border-radius: 50.10667rem;
 background: #fff;
 }
 
 .color{
 background: #de698c;
 }
</style>